<template>
  <div>
    <p>列表页</p>
    <p>传过来的query参数第一种写法:pageSizes:{{ $route.query.pageSize }}</p>
    <p>传过来的query参数第一种写法:total:{{ $route.query.pageNumber }}</p>
    <el-divider></el-divider>
    <p>传过来的query参数第二种写法:pageSizes:{{ route.query.pageSize }}</p>
    <p>传过来的query参数第二种写法:total:{{ route.query.pageNumber }}</p>
    <p>传过来的query参数第三种写法:pageSizes:{{ pageSize }}</p>
    <p>传过来的query参数第三种写法:total:{{ pageNumber }}</p>
    <el-button type="primary" size="small" @click="jump"
      >进入文章详情页</el-button
    >
  </div>
</template>
<script>
export default {
  name: "list-page",
};
</script>
<script setup>
import { ref, reactive, computed, onMounted, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const pageSize = computed(() => {
  return route.query.pageSize;
});
const pageNumber = computed(() => {
  return route.query.pageNumber;
});
watchEffect(() => {
  console.log("pageSize: ", pageSize.value);
  console.log("pageNumber: ", pageNumber.value);
});
onMounted(() => {
  router.push("/lesson7?pageSize=1&pageNumber=100");
});
const jump = () => {
  router.push("/artcle/123");
};
</script>

<style lang="scss" scoped></style>
